<template>
  <div class="rolemessage">
    <div class="left">
      <div class="rolemessageHeader">角色</div>
      <a-collapse v-model="activeKey">
        <a-collapse-panel :key="item.key" v-for="item in lists" :header="item.mc">
          <div class="box">
            <div style="margin-top:10px;height:auto;overflow:hidden">
              <div class="btn-item" :class="[item1.check?'btn_active':'']" @click="item1Click(item1)" style="margin:0 10px 10px 0;float:left"
                v-for="item1 in item.children" :key="item1.id">
                {{item1.mc}}</div>
            </div>
          </div>
        </a-collapse-panel>
      </a-collapse>
    </div>
    <div class="right">
      <div class="rolemessageHeader">已选择角色</div>
      <div style="padding:10px">
        <table style="table-layout:fixed;" class="zzjgTable">
          <tr>
            <td>部门</td>
            <td>角色</td>
            <td>审批级别</td>
            <td>直接领导</td>
          </tr>
          <tr v-for="el in checkItems" :key="el.id">
            <td>{{el.gn}}</td>
            <td>{{el.mc}}</td>
            <td>
              <a-select v-model="el.spjbbm" style="width:100%;">
                <a-select-option :value="item.spjbbm" v-for="(item,i) in spxsmcLists" :key="i">
                  {{item.spjbmc}}
                </a-select-option>
              </a-select>
            </td>
            <td style="width:100%;padding-right:0;">
              <a-tree-select dropdownMatchSelectWidth v-model="el.zjldbm" treeNodeFilterProp='title' show-search style="width: 100%"
                :dropdown-style="{maxHeight: '300px', overflow: 'auto' }" allow-clear>
                <a-tree-select-node v-for="item in mrzjldml" :key="item.id" :title="item.mc" :value="item.id" :disabled='item.level!=4'>
                  <a-tree-select-node v-for="el in item.children" :key="el.id" :title="el.mc" :value="el.id" :disabled='el.level!=4'>
                    <a-tree-select-node v-for="ele in el.children" :key="ele.id" :title="ele.mc" :value="ele.id" :disabled='ele.level!=4'>
                      <a-tree-select-node v-for="ele1 in ele.children" :key="ele1.id" :title="ele1.mc" :value="ele1.id" :disabled='ele1.level!=4'>
                      </a-tree-select-node>
                    </a-tree-select-node>
                  </a-tree-select-node>
                </a-tree-select-node>
              </a-tree-select>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import service from '../api/api';
import vuex from "vuex";
const logininfo = vuex.createNamespacedHelpers("login");
const role = vuex.createNamespacedHelpers("zzjg");
export default {
  props: {
    record: Object,
  },
  data() {
    return {
      lists: [],
      activeKey: [],
      checkItems: [],
      spxsmcLists: [],
      spjbbm: "",
      mrzjldml: [],
    };
  },
  mounted() {
    this.queryByDwjsbmApi();
    this.getSpxsmcLists();
    this.mrzjldTreeList();
  },
  methods: {
    ...role.mapMutations(["CHANGEROLEINFO"]),
    async mrzjldTreeList() {
      let params = {
        dwbm: this.personInfo.dwbm,
        // 添加人员传空
        id: (this.record && this.record.rybm) || "",
      };
      let res = await service.zzjg.queryByDwbm(params);
      if (res.code == 0) {
        this.mrzjldml = res.data;
        // console.log(JSON.stringify(res.data));
      }
    },
    // 审批显示名称
    getSpxsmcLists() {
      service.zzjg.addBtnSpxsmc().then((res) => {
        if (res.code == 0) {
          this.spxsmcLists = res.data;
        }
      });
    },
    // left
    async queryByDwjsbmApi() {
      const _this = this;
      let data = {
        dwbm: _this.personInfo.dwbm,
        rybm: (_this.record && _this.record.rybm) || "",
      };
      let res = await service.zzjg.queryByDwjsbm(data);
      this.lists = res.data[0].children;

      // 点击角色 添加人员
      if (_this.record.level == "3") {
        const diGui = (m, val) => {
          for (let item of m) {
            if (item.id == val) {
              item.check = true;
              break;
            } else if (item.children && item.children.length > 0) {
              diGui(item.children, val);
            }
          }
        };
        diGui(this.lists, _this.record.id);
      }

      // debugger;
      // 筛选选中节点  渲染右边

      _this.checkItems = this.$fiterNodes(this.lists);
      // console.log(_this.checkItems);
      this.CHANGEROLEINFO(this.checkItems);
    },
    item1Click(item1) {
      if (!item1.check && this.checkItems.length > 9) {
        this.$message.error("最多选10个");
        return;
      }
      item1.check = !item1.check;
      this.checkItems = this.$fiterNodes(this.lists);
      this.CHANGEROLEINFO(this.checkItems);
    },
  },
  watch: {
    record: {
      deep: true,
      handler() {
        this.queryByDwjsbmApi();
        this.getSpxsmcLists();
        this.mrzjldTreeList();
      },
    },
  },
  computed: {
    ...logininfo.mapState(["personInfo"]),
  },
};
</script>

<style lang='less' scoped>
@import "../css/variableLess.less";
.rolemessage {
  display: flex;
  height: 600px;
  .left {
    width: 380px;
    border: 1px solid @borderColor-h;
    margin-right: 10px;
  }
  .right {
    width: calc(100% - 390px);
    border: 1px solid @borderColor-h;
  }
}
.zzjgTable {
  width: 100%;
  height: 100%;
  tr,
  th,
  td {
    border: 1px solid @borderColor-h;
    height: 36px;
    text-align: right;
    padding-right: 10px;
    color: #666;
    border-collapse: collapse; //不加上这个会重合边框
  }
}
/deep/ .ant-collapse {
  height: calc(100% - 38px);
  overflow-y: auto;
  overflow-x: hidden;
  border: none !important;
  .ant-collapse-arrow {
    position: absolute;
    right: -90%;
  }
}
/deep/ .ant-select-selection {
  padding-left: 20px;
}
</style>

